<template>
  <view class="goodsBox">
    <view
      class="goods"
      v-for="(item, index) of items"
      :key="item.id"
      @click="handle(item, index)"
    >
      <view class="checkBox" v-if="BatchProcessing">
        <checkbox-group>
          <checkbox color="#fff" class="checkbox" :checked="item.checked" />
        </checkbox-group>
      </view>

      <view class="item">
        <view class="goodsHd">
          <view class="img"
            ><image :src="item.cover_pic" mode="aspectFill"></image
          ></view>
          <view class="txt">
            <view class="title">{{ item.name }}</view>
            <view class="tag">
              <view class="tagItem"
                >{{ $t("goods.inventory") }} {{ item.goods_num }}</view
              >
              <view class="tagItem"
                >{{ $t("goods.count") }} {{ item.virtual_sales }}</view
              >
            </view>
            <view class="flex">
              <view class="price">
                <view class="em before">售价¥</view>
                <view class="con">{{ getPrect(item.price)[0] }}</view>
                <view class="em after">.{{ getPrect(item.price)[1] }}</view>
              </view>
              <view class="price cost_price">
                <view class="em before">成本价¥</view>
                <view class="con">{{ getPrect(item.cost_price)[0] }}</view>
                <view class="em after"
                  >.{{ getPrect(item.cost_price)[1] }}</view
                >
              </view>
            </view>
            <view class="supplier_name" v-if="item.cloud_goods_supplier_name">
              {{ item.cloud_goods_supplier_name }}
            </view>
          </view>
        </view>

        <view class="goodsfd" @click.stop="stop" v-if="!BatchProcessing">
          <view
            class="goodsFdLet"
            @click="Emit.$emit('handleGoods', 'more', item, index)"
            >{{ $t("newAdmin.order.more") }}</view
          >
          <view class="goodsFdRig">
			  <!-- 改价格 -->
            <view
              class="btn"
              @click="Emit.$emit('handleGoods', 'batch', item, index, 1)"
              >{{ $t("newAdmin.goods.edit") + $t("list.price") }}</view
            >
			<!-- 改库存 -->
            <view
              class="btn"
              @click="Emit.$emit('handleGoods', 'batch', item, index, 2)"
              >{{ $t("newAdmin.goods.edit") + $t("newAdmin.goods.num") }}</view
            >
            <view
              class="btn"
              @click="Emit.$emit('handleGoods', 'status', item, index)"
              >{{ statusText }}</view
            >
            <view
              class="btn on"
              @click="Emit.$emit('handleGoods', 'edit', item, index)"
              >{{ $t("cart.edit") }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },

    BatchProcessing: {
      type: Boolean,
      default: false,
    },

    statusText: {
      type: String,
      default: "",
    },
  },

  computed: {
    getPrect() {
      return (price) => {
        let newPrice = String(price).split(".");

        return newPrice;
      };
    },
  },

  data() {
    return {
      checked: false,
    };
  },

  methods: {
    stop() {
      return false;
    },

    handle(item, index) {
      if (this.BatchProcessing) {
        this.Emit.$emit("handleGoods", "checked", item, index);
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.goods {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rpx;

  .item {
    flex: 1;
    overflow: hidden;
    padding: 24rpx;
    margin-bottom: 12rpx;
    background: #fff;
    border-radius: 20rpx;
  }
}

.goodsHd {
  display: flex;

  .img {
    width: 180rpx;
    height: 180rpx;

    image {
      width: 100%;
      height: 100%;
      background: #f6f6f6;
      border-radius: 10rpx;
    }
  }

  .txt {
    flex: 1;
    overflow: hidden;
    margin-left: 24rpx;

    .title {
      font-size: 28rpx;
      color: #262626;
      line-height: 40rpx;
      max-height: 80rpx;
      overflow: hidden;
      display: -webkit-box;
      white-space: normal;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .tag {
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 5rpx 0 20rpx;
    }

    .tagItem {
      margin-right: 20px;
      font-size: 24rpx;
      color: #8c8c8c;
    }

    .price {
      display: flex;
      align-items: flex-end;
      margin-right: 24rpx;
      color: #f0250e;
      font-size: 40rpx;
      line-height: 1;
      font-weight: bold;

      &.cost_price {
        color: #262626;
      }

      .con {
        position: relative;
        top: 4rpx;
      }

      .em {
        font-size: 24rpx;
      }
    }
  }
}

.goodsfd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  font-size: 24rpx;
  color: #262626;

  .goodsFdRig {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;

    .btn {
      margin-left: 16rpx;
      padding: 12rpx 24rpx;
      background: #f2f2f2;
      border-radius: 120rpx;

      &.on {
        background: #fdf1f0;
        color: #f0250e;
      }
    }
  }
}

.supplier_name {
  padding-top: 16rpx;
  font-size: 22rpx;
  color: #8c8c8c;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}
</style>
